<ion-header>

  <ion-toolbar>
    <ion-title>Show/Hide When</ion-title>
    <ion-buttons end>
      <button ion-button showWhen="ios">iOS</button>
      <button ion-button showWhen="windows">Windows</button>
      <button ion-button showWhen="android">Android</button>
    </ion-buttons>
  </ion-toolbar>

</ion-header>


<ion-content padding>

  <button ion-button showWhen="ios">iOS</button>
  <button ion-button showWhen="windows">Windows</button>
  <button ion-button showWhen="android">Android</button>

  <p showWhen="ios" style="background:blue; color:white">
    showWhen="ios"
  </p>

  <p showWhen="android" style="background:green; color:white">
    showWhen="android"
  </p>

  <p showWhen="android,ios" style="background:yellow;">
    showWhen="android,ios"
  </p>

  <p showWhen="core" style="background:#ddd;">
    showWhen="core"
  </p>

  <p showWhen="mobile" style="background:orange;">
    showWhen="mobile"
  </p>

  <p showWhen="phablet" style="background:red;">
    showWhen="phablet"
  </p>

  <p showWhen="tablet" style="background:black;color:white">
    showWhen="tablet"
  </p>

  <p showWhen="iphone" style="background:purple; color:white;">
    showWhen="iphone"
  </p>

  <p showWhen="landscape" style="background:pink;">
    showWhen="landscape"
  </p>

  <p showWhen="portrait" style="background:maroon; color:white;">
    showWhen="portrait"
  </p>

  <p hideWhen="ios" style="background:blue; color:white">
    hideWhen="ios"
  </p>

  <p hideWhen="android" style="background:green; color:white">
    hideWhen="android"
  </p>

  <p hideWhen="android,ios" style="background:yellow;">
    hideWhen="android,ios"
  </p>

  <p hideWhen="ios" [hidden]="toggle" style="background:magenta; color:white">
    hideWhen="ios" [hidden]=toggle
  </p>

  <p showWhen="android" hideWhen="landscape" style="background:black; color:white">
    showWhen="android" hideWhen="landscape"
  </p>

  <button ion-button (click)="toggle = !toggle">Toggle Hide When</button>

</ion-content>
